<html> 
 
<head> 
<title>015 | Persistence | J3D</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 

<link rel="stylesheet" href="common/common.css"/>
<script type="text/javascript" src="common/common.js"></script>
<script type="text/javascript" src="../build/j3d.js"></script>
<script type="text/javascript" src="js/Persistence.js"></script>

<script id="blendFilter" type="x-shader/x-filter">
	//#name BlendFilter
	//#author bartekd
	
	//#include CommonFilterInclude
	
	//#vertex
	//#include BasicFilterVertex
	
	//#fragment
	uniform sampler2D uNewTexture;
	uniform sampler2D uOldTexture;
	
	varying vec2 vTextureCoord;

	void main(void) {
		vec4 n = texture2D(uNewTexture, vTextureCoord);
		vec4 o = texture2D(uOldTexture, vTextureCoord + vec2( sin(uTime) * 0.001, cos(uTime) * 0.001 ));
		gl_FragColor = vec4(mix(n.rgb, o.rgb, 0.96), 1.0);
	}
</script>

<script>

	var engine, cube, light, post;
	
	window.onload = function() {
		
		if(!checkWebGL()) return;
		
		engine = new J3D.Engine();	
		engine.setClearColor(J3D.Color.white);
		
		ambient = new J3D.Transform();
		ambient.light = new J3D.Light(J3D.AMBIENT);
		ambient.light.color = new J3D.Color(0.4, 0.4, 0.4, 1);

		light = new J3D.Transform();
		light.light = new J3D.Light(J3D.DIRECT);
		light.light.color = new J3D.Color(0.8, 0.8, 0.8, 1);
		light.rotation = new v3(-Math.PI, 0, Math.PI);
		
		cube = new J3D.Transform();
		cube.geometry = J3D.Primitive.Cube(1, 1, 1);		
		cube.renderer = J3D.BuiltinShaders.fetch("Phong");

		cube.renderer.color = new J3D.Color(1,0,0,1);
		
		post = new J3D.Persistence(engine);
		post.blendFilter = new J3D.ShaderUtil.parseGLSL(document.getElementById("blendFilter").firstChild.nodeValue);

		camera = new J3D.Transform();
		camera.camera = new J3D.Camera();
		camera.position.z = 6;
		engine.camera = camera;

		engine.scene.add(camera, cube, light, ambient);
		draw();
	}
	
	function draw() {
		requestAnimationFrame(draw);
		cube.rotation.x += Math.PI * J3D.Time.deltaTime / 1800;
		cube.rotation.y += Math.PI/2 * J3D.Time.deltaTime / 900;
        cube.position.x = Math.sin(J3D.Time.time / 2) * 3;
		post.render();
	}
	
</script>

</head> 

<body>
	<script>
		setLabels("015. Persistence", "A demo of post processing effect with J3D, based on <a href='http://www.youtube.com/watch?v=rfQ8rKGTVlg#t=31m42s'>this video</a>");
	</script>
	
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24294554-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body> 



</html> 












